<template>
  <div class="login">
    <van-nav-bar
      title="会员登录"
      left-arrow
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <div class="login_title">
      <h1>手机号登录</h1>
      <p>未注册的手机号登录后将自动注册</p>
    </div>
    <div class="login_input1">
      <input v-model="mobile" type="text" placeholder="请输入手机号" />
    </div>
    <div class="login_input2">
      <input v-model="picCode" type="text" placeholder="请输入图形验证码" />
      <div>
        <img
          style="width: 80px; height: 35px"
          :src="picUrl"
          @click="getPicCode"
          alt="code"
        />
      </div>
    </div>
    <div class="login_input3">
      <input v-model="msgCode" type="text" placeholder="请输入短信验证码" />
      <span style="color: orange" @click=" getValCode">
        {{ second === totalSecond ? "获取验证码" : second + `秒后重新发送` }}
      </span>
    </div>
    <div class="login_input4">
      <button @click="Login">登录</button>
    </div>
  </div>
</template>

<script>
import { getPicCode, getMsgCode, codeLogin } from '@/api/login'
export default {
  name: 'PayLogin',
  data () {
    return {
      // 验证码的渲染需要三个东西
      // 1.用户输入的东西 2.请求验证码的key 3.存储验证码的地址
      picCode: '',
      mobile: '',
      pickey: '',
      picUrl: '',
      timer: null,
      second: 60,
      totalSecond: 60,
      // 短信验证码
      msgCode: ''
    }
  },
  // 我们需要的功能是我们一点击验证码就刷新了
  // 验证码，获取了新的验证码，所以在这里我们要
  // 把获取验证码的方法封装起来，因为要一保证一打开页面就马上获取
  // 所以要在created中调用
  async created () {
    this.getPicCode()
  },
  methods: {
    async getPicCode () {
      const {
        data: { base64, key }
      } = await getPicCode()
      this.picUrl = base64 // 存储地址
      this.pickey = key // 存储的唯一标识
      // Toast('验证码获取成功')
      // this.$toast('验证码获取成功')
    },
    validFn () {
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.$toast('请输入正确的手机号')
        return false
      }
      if (!/^[a-zA-Z0-9]{4}$/.test(this.picCode)) {
        this.$toast('请输入正确的图形验证码')
        return false
      }

      return true
    },
    // 获取短信验证码
    async getValCode () {
      if (!this.validFn()) {
        return
      }
      if (!this.timer && this.second === this.totalSecond) {
        const res = await getMsgCode(this.picCode, this.pickey, this.mobile)
        console.log(res)
        this.$toast('验证码发送成功')
        this.timer = setInterval(() => {
          this.second--
          if (this.second <= 0) {
            clearInterval(this.timer)
            this.timer = null
            this.second = this.totalSecond
          }
        }, 1000)
      }
    },
    destroyed () {
      clearInterval(this.timer)
    },
    // 登录
    async Login () {
      if (!this.validFn()) {
        return
      }

      if (!/^\d{6}$/.test(this.msgCode)) {
        this.$toast('请输入正确的手机验证码')
        return
      }
      const res2 = await codeLogin(this.mobile, this.msgCode)
      this.$store.commit('user/setUserInfo', res2.data)
      console.log(res2)
      this.$toast('登录成功')
      const URL = this.$route.query.backUrl || '/'
      this.$router.push(URL)
    }
  }
}
</script>

<style>
.login {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 350px;
  padding: 10px 10px;
}

.login_title h1 {
  font-size: 24px;
  margin-bottom: 10px;
}

.login_title p {
  font-size: 13px;
  color: #b4b4b4;
  margin-bottom: 20px;
}

.login_input1,
.login_input2,
.login_input3 {
  display: flex;
  align-items: center;
  /* 垂直居中对齐 */
  gap: 25px;
  /* 替代 margin，控制输入框与文字间距 */
  margin-bottom: 20px;
  /* 统一上下间距 */
}

input {
  border: none;
  border-bottom: 1px solid #f4f4f4;
  width: 100%;
  margin: 30px auto;
  outline: none;
}

input:focus {
  border-bottom: 1px solid orange;
}

.login_input2 div,
.login_input3 span {
  font-size: 13px;
  white-space: nowrap;
  color: orange;
  /* 统一颜色 */
}

.login_input2,
.login_input3 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.login_input2 {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.login_input3 {
  display: flex;
  flex-direction: row;
  width: 100%;
}
button {
  border-radius: 30px;
  height: 40px;
  width: 360px;
  background-color: orange;
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
}
button:hover {
  opacity: 0.7;
}

.van-nav-bar {
  .van-nav-bar__arrow {
    color: #333;
  }
}
</style>
